<template>
	<main class="bar white">
		<p class="fs32 lh35 tl ml10 pt5 clearfix">
			<span class="fl">{{curQuota.lastPrice|formatPoint(this.curVariety.marketPoint)}}</span>
			<router-link to="/order" class="hold">持仓</router-link>
		</p>
		<p class="fs14 tl ml10 lh30">
			<span>{{curQuota.upDropPrice}}</span>
			<img
				class="ml5"
				:src="curQuota&&curQuota.upDropSpeed<0?imgDown:imgUp"
				alt
			>
			<span class="ml5">{{(curQuota.upDropSpeed * 100).toFixed(2) + '%'}}</span>
			<span class="ml10">卖量</span>
			<span class="ml5">{{curQuota.askVolume}}</span>
			<span class="ml5">买量</span>
			<span class="ml5">{{curQuota.bidVolume}}</span>
		</p>
	</main>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
	name: 'QuotaBar',
	data() {
		return {
			imgUp: './static/imgs/buyup.svg',
			imgDown: './static/imgs/buydown.svg'
		}
	},
	computed: {
		...mapState(['gold', 'navBarShow', 'tradeTime', 'variety', 'curQuota', 'curVariety', 'allTypeVariety'])
	},
	methods: {
		...mapMutations(['setNavBarShow', 'setCurVariety']),
		toOrder() {
			this.$router.push({
				path: '/order'
			})
		}
	}
}
</script>
<style scoped lang='scss'>
img{ 
    width: rem(10px);
    height: rem(10px);
}
.fs32 {
	font-size: rem(32px);
}
.hold {
	background-color: #ee9b2e;
	color: #fff;
	border-radius: rem(2px);
	padding-left: rem(10px);
	padding-right: rem(10px);
	line-height: rem(30px);
	font-size: rem(14px);
    margin-right: rem(10px);
	float: right;
}
</style>